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Introduction 




This unit aims to teach you: 



The advantages of structuring large complex programs 
into separate code modules; 

■ The benefits of black box programming and the 
importance of documentation; 

How to import a function library into a JavaScript 
program and select and use suitable functions to solve 
simple programming tasks; 

■ How to create a fully documented function library; 

The scoping rules that apply to variables and function 
names; 

How to use objects in JavaScript; 

To understand and describe the differences between 
object types and primitive types; 

■ How to create new object types. 
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Introduction 



Commercial programs are large: very, very large - they typically 
consist of hundreds of thousands of lines of code, sometimes 
millions of lines. 

All complex systems, involving computers or not, need to be 
organized in such a way that the human mind can understand and 
deal with them. 

■ It is easier to understand a complex system if it can be visualized as 
a system of simple parts which interact within an overall structure. 

■ There has been an active search for useful structuring techniques 
and for programming languages that support such techniques 
throughout the history of software development. 

One of the earliest techniques was based on the idea of modular 
programming. 

Modules and modular programming have been used in computing 
for many year. 
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A module is an independent piece of software which forms part of 
one or more larger programs. 

synonymous with language-specific terms such as subroutine, function and 
procedure. 

■ Modular programming represents assembling programs from 
independent pieces of software (modules). These modules are 
generally held in separate files, the content of which are imported 
into programs as and when needed. 

- Different programming languages have different concepts of a 
module, but there is a common theme: it should be possible for the 
module’s implementation (its code) to be changed without requiring 
any change to other modules or to the program that uses the 
module. 

In this unit you will learn about two kinds of modules that can be 
implemented in JavaScript - function libraries and object types. 





Introduction 
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Separate code modules 



This section aims to: 

■ Introduce you to the JavaScript facility for 
building separate code modules; 

■ Outline the main advantages of a modular 
approach to program development. 
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Separate code modules 



■ Most modern programming languages have mechanisms for 
constructing a program from a number of separate files rather 
than writing a single huge monolithic program. 

■ Typically the programmer writes a main program to solve 
some problem and ‘imports’ into that program external files of 
code (modules) that have been written separately (perhaps by 
other programmers). 

■ These modules help to solve the problem. 

■ How this is accomplished and how these external files are 
structured differs from language to language and 
consequently these types of ‘helper’ files are known by many 
different names: library files, code libraries, function libraries, 
external code libraries, library modules, components, 
component modules, units, modules, classes. 
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Separate code modules 



■ JavaScript allows you to construct a program from a number 
of separate files, each containing JavaScript code. 

■ A main program file can indicate that it wants to use 
JavaScript code from an external file by the simple inclusion 
of a line of HTML naming that file. 

By convention an extension of .js (short for JavaScript) is 
used as a suffix to the name of such an external file. 

■ The most common type of .js file is a function library which is 
a file containing a collection of related functions. 

■ These files (.js files) can also be used to hold the code 
needed to implement new types of objects. 

■ Array and string objects are object types that you have 
already used. You will learn more about objects in Section 5. 
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Separate code modules 



Advantages of using modules: 

Different aspects of a programming problem may be developed 
separately. 

Locating and isolating problems is much easier than would be the case 
with a monolithic program in a single file. 

■ It allows many people to work on the same project, so shortening 
development time. 

■ Modules can be reused. 

A well designed module ought to be concerned with a specific kind of task or 
data, and provide functions that are relevant for that purpose. Such a module is 
more likely to be reused than one that contains a miscellaneous collection of 
unrelated functions. 

Modules can be considered as replaceable components which can be 
easily replaced by improved versions without affecting or making 
changes to other parts of the program. 

For example, a module to gather input from the user by means of a form could 
be replaced by a module that gathers input from the user using dialogue boxes. 
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Function libraries 

The section aims to: 

■ Describe the meaning of the term ‘function library’; 

Explain what is meant by black box programming 
and the importance of documentation in function 
libraries; 

■ Explain how it is possible to use a function from its 
specification, without needing to know how it works; 

■ Explain how to import a function library into a 
JavaScript program; 

■ Show you how to write simple programs that use a 
function library. 




Function libraries 



■ Professional programmers have a saying: ‘ Write once, use 
many timed . 

■ When you develop a solution for doing something in 
JavaScript, or almost any programming language, you should 
aim to save your efforts for use the next time a similar problem 
is encountered. 



■ In some cases an entire function can be reused in a totally 
different program. 

■ We could of course simply copy and paste the required function 
from the old program into the new one but that would be both 
inefficient and error prone. 

■ A better solution is to collect reusable functions into files which 
can then be imported into programs as and when needed. 



Such a file is called a function library and it is an example of a 



module. 
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Function libraries 

■ Whenever you realize that a function captures a pattern of 
activity that is likely to occur in different situations you 
should save it in a function library. 

■ These function libraries can then be imported into every 
program in which the functions they contain are needed, 
avoiding the need to start from scratch each time. 

■ In the previous section we discussed modules in the 
context of different programmers working on the same 
project. 

■ In this section, we have discussed function libraries in the 
context of programmers saving their own functions for 
future reuse. 

Reusable code is a marketable commodity, so some people earn 
a living writing such modules for sale to other programmers. 





Function libraries 

■ To use function libraries written by other programmers, all that 
we need to know are the names of the functions, the 
arguments they require, what they do and any results that they 
return. 

■ It isn’t necessary to know or understand the code of these 
library functions in order to use them. 

■ To achieve this level of abstraction and make it possible for 
other programmers to use a function only from its specification, 
it is essential for the programmer who writes the function to 
document it precisely specifying: 

The name of the function; 

What arguments must be passed to the function and what type of 

value each must be; 

What the function does; 

The value returned, if any, and what it represents. 

ill! 
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□ Function libraries ■■ 

■ This use of library functions (or indeed any software module) by 
reference solely to the documentation rather than their 
implementation is called black box programming. 

■ The term arises from the fact that a programmer does not need 
to know anything about the coding details of a function, which 
can be hidden from view (metaphorically in a black box). All the 
user need consider is the description of what the black box 
does, the data (if any) that it needs to carry out its task and the 
result (if any) that it returns. 

■ In black box programming, you don’t care how the function is 
implemented. 

■ You have been using black boxes throughout this block - we 
don’t know (or want to know!) about the coding details of 
methods SUCh as parseFloat ( ) . 
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Function libraries 



Importing function libraries in JavaScript 

■ In JavaScript, function libraries are simply text files that contain 
collections of functions. 



■ For a program to use the functions defined in such a function 
library, it needs to import that library. 

The effect of importing a function library into a JavaScript program 
is that the program works as if the contents of the library had been 
pasted in at the start of the program file. 

■ To achieve this you need to add a pair of HTML tags in the 
HEAD section of the program. 

This tells the browser where to find the function library. 



■ The tags used are a special version of the now familiar SCRIPT 
tags, with an attribute called SRC (short for source), to specify 
where on your computer (or indeed on the internet) the library 
(the source) can be located. 
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Function libraries 

Examples on how to import function libraries in JavaScript are given below: 

Example 1 

<SCRIPT SRC = myl_ibrary.js> </SCRIPT> 

Or 

<SCRIPT SRC = myl_ibrary.js> 

</SCRIPT> 

Note that the two SCRIPT tags can be on the same line or split over two lines - 
it doesn’t matter. 

The example above would import all the functions in a function library called 
myLibrary.js into your program so long as that function library was in the same 
folder as your program . 

Example 2 

<SCRIPT SRC = C:\M150\JavaScript\FunctionLibraries\myLibrary.js> 

</SCRIPT> 

Here a function library called myLibrary.js would be imported into your program, 
no matter where your program was on your computer provided the function 
library was in the specified folder. 





Function libraries 

Example 3 

<SCRIPT SRC = http:/www. somewhere.co.uk/exampleJSCode/myLibrary.js> 
</SCRIPT> 

Here a function library called myLibrary.js at the address given by the URI 
would be imported into your program, provided your computer was connected 
to the internet. 

In Ml 50, we will keep things simple by ensuring that function library files 
reside in the same directory as your program files, so all our import statement 
will be in the style of the first example. 

■ The effect of a SCRIPT tag such as 
<SCRIPT SRC = myLibrary.js </SCRIPT> 

is the same as if you had copied the entire contents of the function library and 
pasted them between a pair of normal script tags. 

Note that a SCRIPT tag that includes a SRC attribute cannot contain anything 
else. Your own code must go between a second pair of SCRIPT tags, as 
shown in Figure 3.1 . 
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Function libraries 



■ Having imported a function library into a program in this way you can 
access the functions that it contains from within the second pair of 
SCRIPT tags just as though the functions were actually written within 
the program. 




< SCRIPT SRC = myLibrary.js> 
</SCR3PT> 

< SCRIPT > 

foo ( 3 

</SCRIPT> 



Figure 3.1 
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Function libraries 

Using function libraries in JavaScript 

■ Function libraries are intended to be used as black boxes. 

■ Therefore, a programmer who writes a function library must be careful 
to describe the purpose of the file exactly, and the specification of its 
function. 

■ The specification for a function should comprise a list of arguments, if 
any, together with the type of each, what the function does, and the 
type of value that the function returns as its result (if any). 

Without including unnecessary facts about the internal operation of those 
functions. 

■ A function’s specification is a kind of contract or undertaking between 
whoever writes the function and its future users. 

If users call the function with correct argument values, it should deliver 
what its specification promises in terms of actions and/or return values. 

■ By custom and practice, function specifications for each function in the 
library are included underneath the function header as comments . 

■ ■■G 
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Function libraries 

As an example, we will look at the documentation for the function library 
drawingLibrary.js. 

At the top of the file is the following comment which clearly specifies the 
purpose of the function library and when and by whom it was last edited: 



fieie'k'kieieieieieieieieieie'kieieieieieieieieieieieieieieieieieieie’kie'kieie'k’k'kie'kieieieieieieieieieieieieieieieieieieieieief 

/* Library of simple ascii drawing functions - */ 

/* Last edit 09 / 02/04 - RWG */ 

fie **************** ieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieieief 



Now let’s look at the specifications for some of the main functions in the 
function library. 

Note how each function specification states clearly what the function does, 
the type of each argument, and what value the function returns. 

■ The author of this function library has provided an accurate description of the 
function’s externally visible behavior. 



This is all the information someone needs in order to use these functions 
correctly. 
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Function libraries 



function drawSquare (colour, indent) 

y#**#*#*#*###*#**##* , #####*#*##**####**###*#**#####*#* , ***##**#*#***^ 



/* Function draws a square, 10 stars wide and 10 stars high, */ 
/* The function takes two arguments: */ 
/* colour - a string that specifies the colour of the rectangle, */ 
/* indent - a whole number which specifies the number of spaces */ 
/* the rectangle is indented from the left-hand side of the page, * / 
/* Function returns no value, */ 



'k'kii’k'k'kie'k'k'k’le'leit'kickii'k’leie'k’k'k’kieie'k'k’k'k'kieie'ltie'kie'le'kicleie'k'kie'kie'te'kit'k'li'kieieie'k'ltie’k’k'ltieie^ 



function drawRectangle (height, width, colour, indent) 



/* Function draws a rectangle and takes four arguments: 

/* height - a whole number representing the height of the 
/* rectangle- 

/* width - a whole number representing the width of the 
/* rectangle, 

/* colour - a string that specifies the colour of the rectangle, 

/* indent - a whole number which specifies the number of spaces 
/* the rectangle is indented from the left-hand side of the page, 
/* Function returns no value. 






*#lHb******lHt****lHt#*####*####*#**#*##* , #****####*#* , #***1t*** 1 




'* / 
*/ 
*/ 
*/ 
*/ 
*/ 
*/ 
*/ 
*/ 
*/ 
■ * f 
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ction libraries 




function drawLine (length, colour, indent) 
y* ##***■*■***■*■***■***■*■***■*#*■*■***■*■***■**■**■** 



*/ 



/* Function draws a line and takes three arguments: */ 
/* length - a whole number representing the length of the line- */ 
/* colour - a string that specifies the colour of the line, */ 
/* indent - a whole number which specifies the number of spaces */ 
/* the line is indented from the left-hand side of the page, */ 
/* Function returns no value, */ 



j'it **************#*****************************#***** , * , **-#** , * , * , **-* , *** , y 



function drawLeftArrow (length, colour, indent) 



/* Function draws a left pointing arrow line and takes three 
/* arguments: 

/* length - a whole number representing the length of the arrow, 
/* colour - a string that specifies the colour of the arrow, 

/* indent - a whole number which specifies the number of spaces 
/* the arrow is indented from the left-hand side of the page, 

/* Function returns no value. 



*/ 

*/ 

*f 

*/ 

*/ 

*/ 

*/ 

*/ 

*/ 
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Function libraries 



function drawRightArrow (length, colour, indent) 

/****** ******************* ****************** ******************* 
/* Function draws a right pointing arrow line and takes three 
/* arguments: 

/* length - a whole number representing the length of the arrow. 
/* colour - a string that specifies the colour of the arrow. 

/* indent - a whole number which specifies the number of spaces 
/* the arrow is indented from the left-hand side of the page. 

/* Function returns no value. 



*/ 

*/ 

*/ 

*/ 

*/ 

*/ 

*/ 

*/ 



/****** ******************* ****************** ******************* *** j 



function drawDiamond (width, colour, indent) 

I* * * * * * ******************* ****************** ******************* 

/* Function draws a diamond and takes three arguments: 

/* width - a whole number representing the width of the diamond. 
/* colour - a string that specifies the colour of the diamond. 

/* indent - a whole number which specifies the number of spaces 
/* the diamond is indented from the left-hand side of the page. 

/* Function returns no value. 
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Function libraries 

■ Activity 3.2: Write a program that uses functions from 

drawingLibrary.js to draw a picture like Figure 3.2. 



Figure 3.2 
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Programming with function libraries 

■ This section introduces you to the construction of 
function libraries. In particular, the section aims to: 
Show how a function library can be used to write programs 
that manipulate objects; 

Show how to extend a function library by adding new 
functions; 

Explain the criteria on which to group reusable functions into 
function libraries; 

Show how to create a fully documented function library; 
Explain the scoping rules that apply to global and local 
variables and function names and how to avoid name 
collisions in your programs; 

Explain the lifetime of global and local variables. 
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Programming with function libraries 

The Date object type 

■ The Date object type is a Native object that is already defined in the 
language. 

■ The simplest way to create Date objects in JavaScript is: 

var today = new Date() 

- where the reserved word new is used to create an object and assign it 
to the variable today. 

■ Date() is a constructor function, i.e. a function which is used to 
initialize a newly-created object into a Date . 

Thus, new Date ( ) tells JavaScript what kind of object we want. 

■ The Date object type the following properties: year, month, day of 
the month, hour, minute, second, millisecond. 

■ After executing the above statement, the variable today refers to a 
Date object that holds the current date and time precisely to the 
nearest millisecond (read from the computer’s internal clock setting ). 
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Programming with function libraries 

You can also create a Date object for a specific date and time (past 
or future). 

The most precise date and time can be created as follows: 

var myDate = new Date (2004, 4, 3, 12, 24, 34, 15) 

■ The arguments used in this constructor function represent (from left to 
right): year, month, day of the month, hour, minute, second and 
millisecond. So this will create a date where: year = 2004, month = 
May, day of month = 3, hour = 12, minute = 24, second = 34, 
millisecond = 15. 

■ Note the following: 

All the arguments except those for the year and month are optional. If 
they are left out, JavaScript will set them to 00. 

months are ordered from 0, so May, the fifth month, is represented by the 
number 4. 

24 hour clock is used, so 3.00pm is represented by the number 15. 

The name of the day of the week cannot be set as a parameter. 
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Programming with function libraries 

■ Dates can be created with varying accuracy, as follows: 

■ var myDate = new Date (2004, 4, 3, 12, 24, 34) 

■ var myDate = new Date (2004, 4, 3, 12, 24) 

creates a Date object 3 May 2004 at 12.24.00.00 

■ var myDate = new Date (2004, 4, 3, 12) 

■ var myDate = new Date (2004, 4, 3) 

■ var myDate = new Date (2004, 4) 

creates a Date object 1 May 2004 at 00.00.00.00 

■ var myDate = new Date (2005, 3, 25, 15) 

creates a Date object 25 April 2005 at 3.00.00.00 pm 
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Programming with function libraries 

You can also create dates using a single string argument 
as follows. 

var myDate = new Date ('May 3 2004 11:45:21') 

var myDate = new Date ('May 3 2004 11:45') 

var myDate = new Date ('May 3 2004') 

■ Note that if you use a string argument, the full month 
name must appear in the string first, followed by the day 
of the month, followed by the year and then the time. 
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Programming with function libraries 



■ There are many methods associated with Date objects. We will 
use just some of them in this unit: 

getFuiiYear ( ) Returns the year (a four digit number such as 2004) 
getMonth ( ) Returns the month (a number from 0 to 11) 
getDate ( ) Returns the day of the month (a number from 1 to 31 ) 
getDayO Returns the day of the week (a number from 0 to 6, with 0 
representing Sunday, 1 Monday, and so on) 
getHours ( ) Returns the hour (a number from 0 to 23) 
getMinutes ( ) Returns the minute (a number from 0 to 59) 
getseconds ( ) Returns the second (a number from 0 to 59) 

■ For example, the code: 

myDate. getFuiiYear () would return a four-digit number 
representing the date’s year. 

■ None of the above methods alter (change) the date and 
time that a Date object contains. 
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Programming with function libraries 

However, the following methods can be used to change 
(or reset) the various elements of a date: 

setFuiiYear (year) Sets the year of the Date object (4 digits) 
setMonth (month) Sets the month in the Date object (0 to 1 1 ) 
setDate (day) Sets the day of the month in the Date object (1 to 
31) 

setHours (hour) Sets the hour in the Date object (0 to 23) 
setMinutes (minute) Set the minute in the Date object (0 to 59) 
setSeconds (second) Sets the second in the Date object (0 to 59) 

■ For example, the code myDate . setFuiiYear (2005) 

would change the year held by myDate to 2005 . 
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Programming with function libraries 

Programming with the dateLibrarv.is function library 

The specification (the comments) for all the functions in the function 
library dateLibrary.js is provided in Appendix 1 at the end of this unit. 
Here are the specifications of the functions we are going to use in 
activities 4.1 , 4.2 and 4.3. 



function dayName (aDate) 

I* ************************************************************* 

/* Argument is a Date object. Returns a string representation */ 

/* of the day of the week, */ 

function differencelnYears (dateA, dateB) 

y* ************************************************** ***************** y 

/* Function takes two arguments, both Date objects. The */ 

/* function returns the difference in years (a number) */ 

/* between the two arguments- */ 

f* **************************************************************** j 
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Programming with function libraries 



function cliff erencelnDays (dateA, dateB) 

^* ***************** ******************** ****************** * 
/* The function takes two arguments, both Date objects, 

/* The function returns the difference in days (a number) 

/* between the two arguments, 

^* ***************** ******************** ****************** i* 

function displayMonth ( theDate) 

jit 'k'k'k'k'k'k'k'k'k'k'k'k'k'k'k'k'k ******************** ****************** * 

/* The argument is a Date object. The function displays a 
/* formatted text based calendar for that date's month. 

/* For example : 

/* January 2004 



* * * * * j 

*/ 

*/ 

*/ 

* * * * * j 

k * * * * j 
*/ 
* / 
* / 
*/ 
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Programming with function libraries 

■ Activity 4.1 : Write a program that prints out the day of the week 
(e.g. Tuesday) on which someone was born. To do this you need 
to do the following: 

You start by prompting the user for the year, month and day of their 
birthday and use those values to create a new date using the 
following code: 

var birthday = new Date (year , month, day ) 

Then you need to create today’s date, which can be done with the 
code: 

dateToday = new Date(); 

Next you will need to use the function dayNameQ from the 
dateLibrary.js, that, given a date as an argument, returns the day of 
the week (e.g. 'Tuesday') as its return value (result). 

Finally write out the day of the week returned from the function using 

document . write ( ) . 
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Programming with function libraries 



/* Program that prints out the day of the week on which 
someone was born */ 

var day, month, year, birthDay; 

year = parseFloat (window . prompt (' Enter year as a four-digit 
number 

month = parseFloat (window . prompt (' Enter month as a number 
from 1 to 12 ; 

month = month -1; 

day = parseFloat (window . prompt (' Enter day as a number from 
1 to 31 ', ")); 

birthDay = new Date (year , month, day ) ; 

document . write ( ' You were born on a ' + dayName (birthDay) ) 
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Programming with function libraries 

Activity 4.2: Write a program that will tell a user how old they are to 
the nearest day! The program will write out their age in both years and 
days. 

You start by prompting the user for the year, month and day of their 
birthday and use those values to create a date. 

Then you need to create today’s date, which can be done with the code: 

dateToday = new Date(); 

Next you will need to use two functions in dateLibrary.js, 
difference in Years () that takes two dates and returns the difference 
between them in years and dif ferenceinDays ( ) that takes two dates 
and returns the difference between them in days. 

Finally write out the age in both years and days, with some accompanying 
text, for example: 

You are 36 years old. 

Which means you have been on this Earth for 13149days. 
Have you used your time wisely? 
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Programming with function libraries 



/* Program to calculate and write out the user's age to the 

nearest day */ 

var day, month, year, birthDay, today; 

year = parseFloat (window . prompt (' Enter year as a four-digit 
number 

month = parseFloat (window . prompt (' Enter month as a number 
from 1 to 12','')) -1; //months are ordered from 0 

day = parseFloat (window . prompt (' Enter day as a number from 
1 to 31', ")); 

birthDay = new Date (year , month, day ) ; 

today = new Date(); 

document . write (' You are '+ dif ferencelnYears (today, birthDay ) 
+ ' years old.' + ' <BR> ' ) ; 

document . write (' Which means that you have been on this Earth 
for ' + dif ferenceinDays (today , birthDay) + ' days.'); 






■i i ■ i i — i ii mm c: i i " 



18 



2/14/2010 



Programming with function libraries 



Activity 4.3: Write a program that will display a 
twelve-month calendar for a particular year; the 
output of your program will look like Figure 4.1 . 
Your program should work as follows: 

Prompt the user for their chosen year. 

Create a date for the January of that year 
entered by the user using the code: 
var date = new Date (year, 0) 



January 2004 

Su Mo Tu We Th Fr Sa 



01 02 03 
04 05 06 07 08 09 10 
11 12 13 14 15 16 17 
18 19 20 21 22 23 24 
25 26 27 28 29 30 31 



Next, write a for loop which will execute 12 
times, for each value of month from 0 to 11. 
Each time the loop is executed, the program 
needs to: 

Update the Date object so that it represents a 
different month of the year; using the code: 

someDate . setMonth (aNumber) 

Then use it as the argument to the function 
displayMonth ( ) in the dateLibrary.js which 
will print out the month in a calendar format. 



February 2004 

Su Mo Tu We Th Fr Sa 



01 02 03 04 05 06 07 
08 09 10 11 12 13 14 
15 16 17 18 19 20 21 
22 23 24 25 26 27 28 
29 

Figure 4.1 






Programming with function libraries 



/* Program to display a calendar for a given year */ 

var year = parseFloat (window . prompt (' Enter year', ' 
var date = new Date (year, 0); 

for (var month = 0; month < 12; month = month + 1) 

{ 

date . setMonth (month) ; // update the month 

displayMonth (date) // display the calander for that month 
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Programming with function libraries 

Extending a function library 

■ The programs in Activities 4.1 and 4.2 both used the same steps to 
create a new date: 

Prompt the user for a year (a four-digit number) and assign the value 
returned to a variable; 

Prompt the user for a month (a number from 1 to 12) and assign the value 
returned to a variable; 

Prompt the user for the day of a month (a number from 1 to 31) and assign 
the value returned to a variable; 

Create a new date using the values returned from the prompts as 
arguments to the Date ( ) method. 

■ Since this process of creating new dates is useful in the context of 
Date objects, we will write a function that does this and add it to the 
date function library. 

■ Adding a function to an existing function library is done by writing the 
new function at the bottom and saving the file again. 
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Programming with function libraries 



■ In activity 4.5 you are now going to write the function 
promptForDate ( ) which has the following specification: 

function promptForDate ( ) 

/*************************************************************** / 



/* Function takes no arguments. Prompts user for: */ 
/* a year number from 1900 to 3000 */ 
/* month number from 1 to 12 */ 
/* day number from 1 to 31 */ 
/* Returns a date object with the given year, month and day */ 



/it**************************************************************/ 



- In order to make the function more realistic, you need to check that 
the values entered by the user are valid, i.e. the year number is from 
1900 to 3000, the month number is from 1 to 12 and the day number 
is from 1 to 31. 



If any of these values entered is not valid, you will need to repeat the 
prompt using the while loop as you learned in unit 7. 

The code of the body of the function promptForDate ( ) follows: 
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Programming with function libraries 

function promptForDate ( ) 

{ 

var dayNumber, monthNumber, yearNumber; 

yearNumber = parseFloat (window . prompt (' Enter year number from 1900 to 3000','')); 
while (yearNumber < 1900 | | yearNumber > 3000) 

{ 

yearNumber = parseFloat (window . prompt (' Enter year number from 1900 to 
3000' , ' ' ) ) 

} ; 



monthNumber = parseFloat (window . prompt (' Enter month number from 1 to 12','')); 
while (monthNumber <1 | | monthNumber > 12) 

{ 

monthNumber = parseFloat (window . prompt (' Enter month number from 1 to 12','')) 

} ; 



dayNumber = parseFloat (window . prompt ( 'Enter day number from 1 to 31 ','')) ; 
while (dayNumber < 1 | | dayNumber > 31) 

{ 

dayNumber = parseFloat (window . prompt (' Enter day number from 1 to 31','')) 

} ; 

return new Date (yearNumber, monthNumber - 1, dayNumber) 
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Programming with function libraries 

■ The promptForDate () function we’ve just written has a 
flaw: while it stops the user entering an invalid year or an 
invalid month number, it doesn’t stop the user entering an 
invalid day number. 

■ It makes sure that the number is from 1 to 31 , but some 
months have only 30 days, and February has 28 or 29 
days depending on whether or not the year is a leap year. 

■ In activity 4.6, this function is modified so that invalid day 
numbers are rejected. 
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Programming with function libraries 

Creating function libraries 

■ To create your own function library from scratch is a 
straightforward task. 

■ Function library is simply a text file containing a collection 
of functions; HTML tags are not allowed or needed, the 
file contains pure JavaScript. 

■ Therefore, to create your own function library: 

Functions are written as lines of code in a text file. 

The text file is saved with the extension .js. 

■ Function libraries need to have documentation. A function 
library that didn’t include the full specifications of all the 
functions as function comments would not be very useful 
at all. 
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Programming with function libraries 



Scope of variables 

■ You have seen variables declared in a number of places in JavaScript 
programs - at the beginning of a program, within for loop headers, 
and also within functions. 



■ Where a variable is declared in a JavaScript program affects where it 
can be accessed from. This is termed the scope of the variable. 

- There are two main types of variables: 

■ Global variable: a variable that can be accessed and from anywhere 
in a program, including inside the body of any function, and which 
exists for as long as the program executes. 

Global variables are the ones we used to define at the beginning of the program 
using the reserved word var. 

■ Local variable: a variable that is declared within a function. Such 
variables are not visible (out of scope) to the outer program. A local 
variable exists as long as the function executes. 

■ Let’s look at two examples to demonstrate these variables. 



1 1 B || 
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Programming with function libraries 

■ Example 1 : 

function scopeTest () 

{ 

a = ' cat ' ; 

document . write (' Inside the function, the value of a is ' 
a + ' <BR> ' ) ; 

}; 

/* The next line is where a is declared. Since it is declared 
outside any function, it has global scope.*/ 

var a 

a - ' dog ' ; 

document . write ( ' Before calling scopeTest (), the value of a is ' 
+ a + ' <BR> ' ) ; 

scopeTest ( ) ; 

document . write (' After calling scopeTest (), the value of a is ' 

+ a + ' <BR> ' ) 

Running this program produces the following output. 

Before calling scopeTest (), the value of a is dog 
Inside the function, the value of a is cat 
After calling scopeTest (), the value of a is cat 












■ 



Programming with function libraries 

Let’s explain what happened in examplel : 

■ The variable a is initially assigned a value, ' dog', in the first 
line of code in the main program. 

■ After this value has been displayed, the function scopeTest ( ) 
is called. 

■ This function assigns a new value, ' cat' to a, and displays this 
value. 

■ Finally, control returns to the main program, which displays the 
current value of a, which is ' cat '. 

■ This demonstrates that the function scopeTest ( ) can access 
and alter the value of the global variable a that is declared in 
the main program. 

Even though the function has finished executing, a retains its 
value (cat). 
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Programming with function libraries 

Example 2: 

function scopeTest2() 

{ 

var a 

a - ' cat ' ; 

document . write (' Inside the function, the value of a is ' 

+ a + 1 <BR > 1 ) } 

} 

/* The next line declares a variable with global scope.*/ 

var a; 

a - ' dog ' ; 

document . write (' Before calling scopeTest2 ( ) , the value of a is ’ 
+ a + 1 <BR > 1 ) } 

scopeTest2 ( ) ; 

document . write (’ After calling scopeTest2 ( ) , the value of a is ’ 

+ a + ' <BR> ' ) ; 

Running this program produces the following output. 



Before calling scopeTest2 ( ) , the value of a is dog 

Inside the function, the value of a is cat 

After calling scopeTest2 ( ) , the value of a is dog 




Programming with function libraries 

Example2 shows a situation where variables with the same name are 
declared in both the main program and a function used by that 
program. 

Because variables declared in a function (local variables) are out of 
scope elsewhere in the program, functions can declare local variables 
that have the same name as global variables declared in the 
surrounding program. 

■ If a function does declare a local variable with the same name as a 
global variable declared in the main program, the variable in the main 
program becomes inaccessible to that function (the variable in the 
main program is put into suspended animation). 

In example2, when the function scopeTest2() is executing, the 
global variable a (the one with the value 'dog' in the outside 
program) cannot be accessed. Instead, the local version takes over ( 
the one defined inside the function). 



When the function finishes, the global one is released and becomes 
active again. 



1 1 B II 
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Programming with function libraries 

Figure 4.2 shows that there are four global variables v, w, x and y declared in the main 
program. By default all these variables are available to the function f. However, the 
variable y becomes inaccessible to function f. This is because the variable y has been 
declared inside the function f, putting the global variable y in a suspended animation. 




Figure 4.2 Scope of global and local variables in a program with a single function 
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Programming with function libraries 

Lifetime of a variable is the duration of its existence. 

Global variables exist for as long as the program is 
running. 

Local variables only exist for as long as the function in 
which they are declared is executing. If the function is 
called again all its local variables will be recreated 
(because their previous values will have been lost). 

■ Table 4.1 summarize the scope and lifetime of variables. 
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Programming with function libraries 




Type of 
variable 


Global 


Local 


Declaration 


Declared in main program 


Declared in the function in 
which it is to be used 


Scope 
(sometimes 
known 
as visibility) 


Generally visible 
everywhere in the 
program, including within 
the bodies of any functions 
defined in that program or 
imported from function 
libraries. 

However, if a variable with 
the same name is declared 
in one of these functions, 
the global variable will lose 
visibility during the 
execution of that function 


Visible only within the 
function in which it is 
declared (including any 
functions declared inside 
that function) 


Lifetime 


Exists for as long as the 
program runs (but will be 
put into 'suspended 
animation' during 
execution of a function 
containing a local variable 
with the same name) 


Exists only during the 
execution of the function in 
which it is declared 
(including any other 
functions called by that 
function) 



Table 4.1 Summary of the scope of local and global variables 
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Programming with function libraries 

Functions, variables and name collisions 

■ When writing larger programs with lots of functions and global 
variables which import code from function libraries, name collision 
can become a problem. 

■ Name collisions occur when a global variable has the same name as 
a function, or another global variable, or when two functions have the 
same name. 

- Such name collisions can cause bugs in your programs that can be 
difficult to track down. 

- To limit the possibilities of name collisions, authors of JavaScript 
function libraries often prefix function and global variable names with 
the name of the function library. 

e.g. myLibrary_someVar, instead of simply someVar and 
myLibrary_someFunction ( ) instead of someFunction ( ) . 

■ To avoid long variable and function names it is common to shorten 
the prefix to the function library’s initials, e.g. ml_someVar. 
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Objects in JavaScript 



Object-oriented programming is one of the most useful 
ways of constructing modular software. In this approach, a 
program is structured out of intercommunicating ‘objects’. 

■ This section aims to: 



Show you the difference between object types and primitive types 
in JavaScript, and the difference between value semantics and 
reference semantics; 

Explain how objects of a particular object type are created using 
the reserved word new and a constructor function; 

Describe how an object consists of both data (its properties) and 
behavior (its methods); 

Show you how to create new object types in JavaScript; 

Show you how to create a . js file that contains all the code 
necessary to implement an object type and how to import it into 
your programs. 




Objects in JavaScript 



Objects and types 

■ A data type defines a collection of values together with the 
operations that are allowable on those values. 

■ For example, in JavaScript l, 27 , 5 6 and 34 are values 
(instances) belonging to the number data type. Examples of 
allowable operations for number values are 

■ true and false are the (only) values belonging to the 
Boolean data type and examples of allowable operations for 
such values are >, <, <=, | | , &&. 

■ Boolean and number are examples of primitive data types 
(basic types). 

■ Primitive data types are types that are not defined in terms of 
other data types, 




■ ■■ 
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Objects in JavaScript 



■ JavaScript provides a number of data types which are called 
Object types, SUCh as Array and String. 



A particular instance of an object type is called an object. 

An object type defines the properties of its instances together 
with the code (in the form of methods) that can operate on its 
instances. 



■ For example: the string 'Hello world!' is an example of object 
belonging to the string object type. 

Using object terminology we say that 'Hello world! ' is a 
string object, or an instance of the string object type. 

- string objects have the single property length and examples of 
allowable operations would be + (the concatenation operator) and the 
method charAt ( ) . 



■ An object can be named (referenced) by a single variable. For 
example: 

stringl = 'Hello world!' 





Objects in JavaScript 



There are three object categories in JavaScript: 

Native object types are defined by the JavaScript 
language. 

Examples are the String, Array, Date, and Math object types. 

■ Host object types are supplied to JavaScript by the 
browser environment . 

Examples of these are window, Document, and Form object 
types. Note that the variables window and document (lower-case 
initial letter), which are particular instances of the window and 
Document object types, respectively, are automatically declared 
for you in any JavaScript program you write. 

■ User-defined object types are defined by you, the 
programmer. 



1 1 B II 
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Objects in JavaScript 



■ An object type defines a collection of properties 
and methods . 

Properties are variables, which may be either primitive 
data types or other object types. 

Because their value may differ from one instance of an 
object to another, they are often called instance 
variables. 

The set of values of an object’s instance variables are 
termed its state. 

Methods are the functions that act on an object’s 
properties and collectively implement the object’s 
behavior. 
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Objects in JavaScript 

For example: Car is an object type, which defines: 



Properties, such as: name, model, color, speed, 

enginePower, ... etc 

Methods, such as: start, accelerate, decelerate, stop, 
turnLeft, turnRight, park, reverse,... etc. 



yourCar is an instance of Car , which could have the following 
state: 



name — > 'Toyota' 
model — > 2010 
Color — > 'White' 



and so on ... 

myCar is another instance of Car, which could have the following 
state: 



name --> 'Honda' 



model — > 2009 



Color — > 

and so on ... 



Red' 
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Objects in JavaScript 



yourCar instance 
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Objects in JavaScript 



An object is created by using the object creation operator 
new, followed by a constructor function, i.e. a function 
which is used to initialize a newly-created object into a 
particular kind of object type and hence associates the 
object with properties and methods. For example: 

■ The code: var today = new Date() 

will result in the variable today referring to a Date object, in this 
case a date that represents today’s date. 

Date ( ) is the constructor function. 

■ The code: var myArray = new Array (12) 

will result in the variable myArray referencing an Array object 
with 12 elements (all of them undefined). 

- Array () is the constructor function. 
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Objects in JavaScript 



JavaScript enables you to define and create your own object types, by 
defining a constructor function. 

As an example, we are going to create a new object type, student 
which has two instance variables (properties): name, courseCode. 

■ Figure 5.1 shows examples of two students instances studentA and 
studentB. 



Note that both instances have the same properties but the values of the 
properties is different from student to student, i.e. they have different 
state. 



r > 

studentA 




r 

studentB 


properties 




properties 


name > 'Joe' 




name > 'Jill' 


courseCode > 'Ml 50' 




courseCode > 'M255' 


V J 




J 



Figure 5.1 Two example Student, objects 
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Objects in JavaScript 



■ In order to create objects of this new student object type we 
are going to need a constructor function. Here it is. 

function Student (aName, aCourse) 



//object properties 
this .name = aName; 



this . courseCode = aCourse 



> 

■ The this reserved word is used by JavaScript as a reference 
to the object that has just been created by the new reserved 
word. 

■ Thus the code in the student () constructor function assigns 
the values aName and aCourse to the name and courseCode 

properties of the newly-created student object. 



1 1 B II 



■I I ■ » I - Hi I0B c: I J — 1 .0 I art -• 



31 



2/14/2010 



Objects in JavaScript 



■ Now that we have a constructor function we can create a 
Student object in the following manner: 

var studentA = new Student ( 1 Joe ' , 'M150 1 ) ; 

What happens here is that the new operator works by first 
creating a new totally empty generic object, an object with no 
properties defined; which is just a reference to an address in 
memory. 

■ Then the new operator calls the constructor function 
student o with the arguments 'Joe' and 'M150' and also 
passes into the function the newly-created empty object, which 
is what this refers to. 



■ So new creates the objGCt but it s the constructor function that 
shapes the object into a particular type of object - in this case a 
Student object 
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Objects in JavaScript 



■ Let’s look inside the constructor function once again: 

function Student (aName, aCourse) 

{ 

this. name = aName; 



} 

■ What happens when this . name = aName; is executed? 

■ First of all, this is a reserved word that JavaScript uses as a 
reference to the object that has just been created by the reserved 
word new. 

■ Next, the dot notation this. name tells JavaScript to give the object 
referenced by this a property called name. 

■ Finally when the constructor function is called with an actual argument 
to replace aName ('Joe' in the case of the example above), the 
assignment statement will cause this. name to reference the value 
of the argument. 





32 



2/14/2010 



Objects in JavaScript 



■ Now that a Student object has been created and assigned to 
studentA we can access that student’s properties using the 
dot notation . 

So, for example, the following assignment statements assign 
the values of the name and courseCode properties of 

studentA to the variables theName and theCourse: 



var theName = studentA . name 



var theCourse = studentA . courseCode 

We can change the values of an object’s properties in a similar 
way, as follows. 

■ studentA . name = 'Jim 1 



■ studentA . courseCode = 'M255' 

■ The above code will change the name property to ' Jim‘ and 
the courseCode property Of studentA to 'M2 55' and 
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Objects in JavaScript 



Activity 5.1: Create a student object named somestudent with the name 
’Lindsey' and the courseCode ’M150\ and then change the values of the 
name and courseCode properties to ‘Sara’ and ‘m2 5 6, respectively. 



function Student (aName, aCourse) 

{ 

this .name - aName; 

this . courseCode = aCourse 

}; 

var somestudent; 

someStudent - new Student (' Lindsey ',' M150 ') ; 

document . write ( ' name is ' + somestudent . name + '<BR>'); 

document . write ( ' course is ' + somestudent . courseCode + '<BR>' ) ; 

somestudent . name = 'Sarah'; 

somestudent . courseCode = 'M256'; 

document . write ( ' <BR> ' ) ; 

document . write (' name is now ' + somestudent . name + '<BR>'); 
document . write (' course is now ' + somestudent . courseCode ) 
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Objects in JavaScript 



Activity 5.2: Add a third property: student id (a student’s unique identifying 
number) to our student object type. Then test it by creating a student 
object named anotherStudent with the name set to ' Stanley', the 
courseCode set to 'M150' and the studentID set to the number 54678. 



function Student (aName, aCourse, idNumber) 

{ 

this. name = aName; 

this .courseCode = aCourse; 

this . student ID = idNumber 



var anotherStudent; 

anotherStudent = new Student (' Stanley M150 ', 54 678 ) ; 
document . write ( ' name is ' + anotherStudent . name) ; 
document . write ( ' <BR> ' ) ; 

document . write ( ' course is ' + anotherStudent . courseCode ) ; 
document . write ( ' <BR> ' ) ; 

document . write (' id number is ' + anotherStudent . student ID ) 







Objects in JavaScript 



Adding behavior - object methods 

We’ll now give the student object type an additional property, 
tmaScores, which will be used to reference an array which will hold the 
scores that a student achieves in each of their TMAs. 

As the number of TMAs a student must complete depends on the course, 
we need to give the constructor function an extra argument, noOfTmas, 
which will enable an appropriately sized array to be created by the 
constructor function. So now the constructor function for student objects 
looks like the following. 



function Student (aName, aCourse, idNumber , noOfTmas ) 

{ 

this. name = aName; 

this . courseCode = aCourse; 

this . student ID = idNumber; 

this . tmaScores = new Array (noOfTmas ) 

■■■ 
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Objects in JavaScript 



■ Now that we have defined the new property, we will write 
a method to modify the array referenced by the new 
added property tmaScores. 

In JavaScript a method is simply a function associated 
with a given object type, via a statement in its 
constructor function. 

The function is defined in the usual way and a statement 
added to the object constructor to make the function a 
method for that object type. 

■ We will demonstrate how this two-stage process works 
by adding a method updateTmaScores() to the 
student object type. 
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Objects in JavaScript 



■ First, we will write the function, which we have chosen to call 

updateTmaResults () . 

It needs two arguments: the number of the TMA for which a score is to be 
added or modified, which we will call tmaNo, and the score itself, which we 
will call score. 

Note that we could have given this function the same name as the method, 
but for clarity we have used a slightly different name so that it is clear when 
we are talking about the function and when we are talking about the 
method. 



function updateTmaResults (tmaNo, score) 

{ 

// arrays in JavaScript are zero based 
// so we deduct 1 from the TMA number 
this . tmaScores [tmaNo - 1] = score 

} 




■■■ 
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Objects in JavaScript 



Now we must associate the updateTmaResuits ( ) function with the 
method name updateTmaScores () for student objects. 

We do this by adding another line of code to the student () constructor 
function as follows. 

function Student (aName, aCourse, idNumber, noOfTmas) 

{ 

this. name = aName; 

this . courseCode = aCourse; 

this . student ID = idNumber; 



this . tmaScores = new Array (noOfTmas) ; 

// object methods 

this . updateTmaScores = updateTmaResuits; } 

The line Of code: this .updateTmaScores = updateTmaResuits; 

assigns the function updateTmaResuits () to the method name 

updateTmaScores. 



Note that a function’s parentheses are omitted when assigning it to a 
method name. 
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Objects in JavaScript 



Have you noticed that properties and methods seem rather similar? 
They are both variables! 



Properties hold values such as numbers or references to other objects, 
while methods are variables that hold references to functions. Indeed in 
JavaScript functions are actually objects! 



Now that the constructor function is complete, let’s create another 
Student object. 



var cleverStudent = new Student (' Gill 'M150 ',97646,4); 



clever Student . updateTmaScores (1,85); 

■ The final line of code instructs the object referenced by 
cleverStudent to execute its updateTmaScoresQ method which in 
turn is simply a reference to the updateTmaResuits() function, so the 
function updateTmaResuits() gets called with the arguments l and 

85. 



■ i.e. the line of code being executed in the function 
updateTmaResuit s() is equivalent to: 



cleverStudent . tmaScores [1-1] =85 
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Objects in JavaScript 



Activity 5.4: Write a program that will create two student objects, 
student l and student2, and then give each student scores for four 
TMAs using the method updateTmaScores() and then display the scores 
for each student . 



function Student (aName, aCourse, idNumber, noOfTmas) 

{ 

this. name = aName; 

this . courseCode = aCourse; 

this . student ID = idNumber; 

this . tmaScores = new Array (noOfTmas ) ; 

this . updateTmaScores = updateTmaResult s 

} 

function updateTmaResult s (tmaNo, score) 

{ 

this . tmaScores [tmaNo -1] = score 

} 
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var studentl = new Student (' Sydney ' , 'M150 ' , 45368, 4) ; 

var student2 = new Student (' Anaise ' M150 ' , 54357 , 4 ) ; 

studentl .updateTmaScores (1, 56) ; 

studentl .updateTmaScores (2, 67) ; 

studentl .updateTmaScores (3, 78) ; 

studentl .updateTmaScores (4, 85) ; 

student2 .updateTmaScores (1,44) ; 

student2 .updateTmaScores (2,78) ; 

student2 .updateTmaScores (3, 89) ; 

student2 .updateTmaScores (4, 59) ; 

document .write ( ' Scores for studentl are ' 

+ student 1 . tmaScores . toString ( ) ) ; 
document .write ( ' <BR> ' ) ; 

document .write ( ' Scores for student2 are ' 

+ student2 . tmaScores . toString () ) 



Note: the tosting function is used here to convert the Array into a 
string so that the elements of the Array can be printed directly, without 
using the for loop to iterate over the elements in order to print them. 
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Activity 5.5: Add an additional method to the student object type called 
dispiay(), which will write out the values of all the properties for a 
student object. Then use this method to write out the property values for 
two students objects. Examples of the expected output is: 

Name: Fred Course: M254 

Student ID: 93285 

TMA Scores: 78,79,87,65 

Name: Jill Course: M150 

Student ID: 76549 

TMA Scores: 73,89,85,92 

First, you need to write a function called dispiaystudent() to display the 
values of a student’s properties using document . write(). 

Once the function is written, you need to add a line of code to the 
constructor function so as to assign your function to a method named 

display(). 

Finally, you need to call the di splay () method for two student objects. 
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Solution of Activity 5.5. 



function Student (aName, aCourse, idNumber, noOfTmas) 

{ 

this. name = aName; 

this . courseCode = aCourse; 

this . student ID = idNumber; 

this . tmaScores = new Array (noOfTmas ) ; 

this . updateTmaScores = updateTmaResult s ; 

this. display = displayStudent 

} ; 

function updateTmaResults (tmaNo, score) 

{ 

this . tmaScores [tmaNo -1] = score 

}; 
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function displayStudent ( ) 

{ 

document . write ( ' Name : ' + this. name); 

document . write ( ' <BR> ' ) ; 

document . write ( ' Course : ' + this . courseCode ) ; 

document . write ( ' <BR> ' ) 

document . write (' Student ID: 1 + this . student ID ) ; 

document . write ( ' <BR> ' ) ; 

document . write (' TMA Scores:' + this . tmaScores . toString ( ) ) ; 
document . write ( ' <BR> ' ) ; 
document . write ( ' <BR> ' ) 

}; 






I In id 



I c: I 3 • 



IB 



Objects in JavaScript 



// code to create the two Student objects 

var studentl = new Student (' Sydney ' , 'Ml 50 ', 45368, 4) ; 

var student2 = new Student (' Anaise ' M150 ' , 54357 , 4 ) ; 

student 1 . updateTmaS cores (1,56) ; 

studentl . updateTmaScores (2, 67) ; 

studentl .updateTmaScores (3, 78) ; 

studentl .updateTmaScores (4, 85) ; 

student2 .updateTmaScores (1,44) ; 

student2 .updateTmaScores (2,78) ; 

student2 .updateTmaScores (3, 89) ; 

student2 .updateTmaScores (4, 59) ; 

// code to display property values calling display () 

student 1 . display ( ) ; 
student2 . display ( ) 
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- Activity 5.6: add another method to the student object type called 
dispiayTmaAverage() which will be used to calculate and display 
a student’s average TMA score. 

■ First, you will need to write a function called 
dispiayAverageScore() to calculate and display a student’s 
average TMA score. 

■ Once the function is written you will need to add a line of code to the 
constructor function that assigns your function to a method name 
called displayTmaAverage(). 

■ Finally you will need to call the displayTmaAverage() method for 
each of the students we have already created for you. 

■ The code below shows only the new function, the constructor 
function and how the method will be called for the two student 
objects we’ve created before student and student 2. 

■ A full working solution for the program is shown in the file 
Solution_9.5.6. 





Objects in JavaScript 



//The constructor function 

function Student (aName, aCourse, idNumber, noOfTmas) 

{ 

this. name = aName; 

this . courseCode = aCourse; 

this . student ID = idNumber; 

this . tmaScores = new Array (noOfTmas) ; 

this . updateTmaScores = updateTmaResult s ; 

this. display = displayStudent 

// new method for displaying the average score 
this . displayTmaAverage = displayAverageScore; 

} ; 
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function displayAverageScore ( ) 

{ 

var total = 0, average; 

for (var index = 0; index < this . tmaScores . length; 
index=index+l ) 

{ 

total = total + this . tmaScores [index] 

>; 

average = total / this . tmaScores . length; 
document . write ( ' TMA average for ' + this . name! ' 
+ average + ' <BR> ' ) 

} ; 



// code to display the TMAs average values for two 
// Student objects by calling displayTmaAverage () 



student 1 . displayTmaAverage ( ) ; 
student2 . displayTmaAverage ( ) 
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Object types and . is files 

- In constructing our student object type we placed all the code in 
the same file as the main program that created and manipulated 
particular student instances. 

However, we can put our student constructor function, and the 
related functions which are assigned to methods, into a self 
contained . js file. 

The code for the student object type could then be imported (just 
like a function library) into any program that needed to create and 
use student objects. 

Indeed this would make very good sense and essentially this follows 
the approach used by any team of programmers working on different 
modules of a large software project. 

Work with activity 5.7 to practice creating a . js file that contained 
all the code for a student object type and imported this file into a 
program. 
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Summary of creatina new object types i 


■ Objects are created using the new operator as follows: 

myObject = new SomeOb jectType ( ) 

■ The new operator creates an empty generic object, an object 
with no properties defined. Then the new operator calls a 
constructor function, in this case SomeOb jectType ( ) and 
passes into the function the newly created empty object. 

■ A constructor function can be considered as a factory for 
formina objects of a particular object type; it associates each 
new object with the properties and methods appropriate to that 


type. 

■ A const 
of objec 
the nan 
letter. 

' ■ 


ructor function always has the same name as the type 
;t it creates. However, unlike ordinary function names, 
nes of constructor functions start with an upper-case 
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Here is the constructor function omeOb jectType ( ) : 



function SomeOb jectType ( ) 

{ 

//object properties 
this . property 1 = 0; 
this . property2 = 1 
//object methods 
this.methodl = functionl; 
this.method2 = function2 



} 

■ Within the function body the reserved word this refers to the object 
created by the new operator, which is automatically passed into the 
function. 

■ The constructor function then forms that object into a particular type of 
object by declaring instance variables (properties) and methods 
appropriate for the type of object and assigning values to them. 
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■ In the above code: this .propertyi = 0; defines, for the 
new created object, an instance variable called propertyi 
and assigns it the value 0. 

■ The code: this.methodi = functioni; defines a method 
for the new object called methodi and assigns to it a function 
called functioni. 

■ Note that when assigning a function to a method the 
parentheses are omitted. 

■ Note also that the function can reference any of the object’s 
properties or methods, for example: 

function functioni () 

{ 

document . write ( this . propertyi ) 

} 




Objects in JavaScript 



■ It is possible to have more than one constructor function per object 
type. 

■ The following example shows another constructor function for our 
object type someObjectType, which takes two arguments that are 
used to initialize the values of the properties: 



function SomeObjectType (argument 1 , argument2) 

{ 

//object properties 

this . propertyi = argument 1; 

this . property2 = argument2; 

//object methods 
this.methodi = functioni; 
this.method2 = function2 
} 
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How objects are stored in memory 

■ Objects are stored in memory differently from primitive 
data types such as numbers. 

■ In the case of primitive data types, the memory location 
holds the data value . This is known as value semantics . 

■ This is because each primitive type has a fixed size and, 
as primitive data types are single data values, it tends to 
be small. 



■ Therefore, JavaScript allocates an eight-byte block of 
memory for the storage of any primitive value. 
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■ In the case of objects, if you assign an object to a variable, the 
variable holds a reference to the object, rather than the object 
itself. 



■ The memory location is ‘labeled’ by a variable will hold a 
reference to the first block of memory where the object is 
stored, together with the number of blocks of adjacent memory 
that the object occupies. 

■ This is because the sizes of objects are not predictable. 
Objects can be any size (much larger than eight bytes) and so 
cannot be stored directly in the same way as primitive data 
types. 

■ This is known as reference semantics. 
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Figure 5.2 shows how a number and a student object are stored in memory 
after the following assignment expressions: 

var aNumber = 99; 



var studentA = new Student ( 'Meena' , 'M254', 27634) 



The variable aNumber is the 
address numbered 669 where the 
number 9 9 can be directly found. 

The variable studentA is the 
address in memory where the 
address of the object that has been 
assigned to it can be found, as well 
as the number of blocks of adjacent 
memory it occupies. 

Hence, the variable studentA is the 
address numbered 667 where the 
address (1500) and size (3*8 bytes) 
of the student object can be found. 
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■ The different ways in which objects and primitive types are stored in 
memory affects the way in which assignment statements work. 



■ Consider the following code that demonstrates assignment with the 
number primitive type. 



var a = 56; 
var b = a; 
a = 22 

Figure 5.3 shows how these numbers are 
held in memory following the execution of all 
three assignment statements. 

■ Although the value of b was originally set by 
assigning it to the same value as a, assigning 
a new value to a has not affected the value of 

b. 




666 

667 

668 

669 

670 

671 

672 
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Now consider the following code which demonstrates assignment with 
Student objects, 
var studentA, studentB; 

studentA = new Student ( ' Meena ' , ' M254 ' , 7 654 9 ) ; 

After the above code has executed, the variable studentA holds a reference 
to the object, rather than the object itself. If the following assignment is made: 

studentB = studentA; 

■ studentB will hold a 
reference to the student 
object with the state 
(property values) 'Meena', 

' M254', and 76549. 

The variables studentA 
and studentB reference 
the identical student 
object, as shown in Figure 
5.4. 




Figure 5.4_ 
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If the following expression is executed: 
studentA . student ID = 27634; 

The student id property is assigned the 
value 27634. 

■ So now the properties of the object 
referenced by the variable studentA 
have the values (state) 'Meena', 'M2 54', 

27634. 

What is the state of the object referenced 
by the variable studentB? 

■ The answer is 'Meena', 'M254' and 

27634. 

This is because the variables studentA 
and studentB do not hold two different 
Student objects; they both hold a 
reference (the address) to the same 
object, as shown in Figure 5.5. 



666 

667 

663 

669 

670 



1500 

1501 

1502 

1503 



studentA 



studentB 



1500,3 



1500, 3 




aKS 
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Exercise: 5.1 : 



Study the following code. 



var 


w 


= 6 ; 






var 


X 


= 7; 






var 


y 


= new 


Array 


( ' bill ' , ' jane ' , 'alice ' ) ; 


var 


z 


= new 


Array 


(4,5, 6 ) ; 


w 


x; 








z = 


y; 








y [l] 




: 99 







■ (a) What are the values of w, x, y and z after all the code 
has executed? 

■ (b) How many numbers and how many Array objects do 
you think exist after all the code has executed? 
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Answer of Exercise 5.1 : 

(a) The value of w is 7. 

The value of x is 7. 

The value of y is a reference to the array ( 'bill ' , 99, ' alice '). 
The value of z is a reference to the array ( 'bill ',99, ' alice '). 
Remember that Array objects in JavaScript are indexed from o, 
so the element indexed by l is the second element. 

■ (b) There will be two numbers (each with the value of 7) stored at 
separate locations in memory. 

Both y and z will reference a single Array object, the one with value 

('bill', 99, 'alice'). 

- Although two array objects were originally created, the array with 
elements 4, 5 and 6 is no longer accessible to the programmer as it is 
not referenced by any variable. The data in the memory locations 
originally referenced by the variable z no longer has any meaning. 
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Unit Summary 



■ In this unit, you’ve learned many important topics including 
the following: 

The advantages of structuring large complex programs into 
separate code modules. 

How to use and create function libraries. 

The Date objects and how to use a function library to write 
programs that manipulate them. 

Understand the difference between object types and primitive 
types in JavaScript, and value semantics and reference 
semantics. 

Understand the concept of objects of a particular object type. 
Creating new object types in JavaScript. 

Creating . js file that contains all the code necessary to 
implement a user-defined object type and how to import it into 
programs. 
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